<template>
  <div class="bg-container">
    <!-- 流转卡号列表 -->
    <div class="my-header">
      <div class="search-form" v-if="headerShow">
        <a-form size="small" :model="pageData" layout="inline">
          <a-form-item label="订单状态" label-col-flex="80px" :style="{width:'315px'}">
            <!-- <a-select popup-container="html"  placeholder="" v-model="pageData.auditState">
              <a-option>Beijing</a-option>
              <a-option>Shanghai</a-option>
              <a-option>Guangzhou</a-option>
              <a-option disabled>Disabled</a-option>
            </a-select> -->
            <a-select popup-container="html" :loading="loadingqws" :allowClear="true" @search="handleSearchqws"
                      v-model="pageData.auditState"
                      :filter-option="false" allow-search @focus="focusSelqws">
              <a-option v-for="item in dropDown.ddzt" :value="item.auditState">{{
                  item.auditState
                }}
              </a-option>
            </a-select>
          </a-form-item>


          <a-form-item label="流转卡号" label-col-flex="80px" :style="{width:'315px'}">
            <a-input default-value="content" v-model="pageData.flowCardCode" placeholder="" allow-clear
                     @press-enter="hccx"/>
          </a-form-item>


          <a-form-item label="色号" label-col-flex="80px" :style="{width:'315px'}">
            <a-input default-value="content" v-model="pageData.colorCode" placeholder="" allow-clear
                     @press-enter="hccx"/>
          </a-form-item>


          <a-form-item label="车间" label-col-flex="80px" :style="{width:'315px'}">
            <a-select popup-container="html" :loading="loadings" :allowClear="true" @search="handleSearchs"
                      v-model="pageData.workshop"
                      :filter-option="false" allow-search @focus="focusSels">
              <a-option v-for="item in dropDown.department" :value="item.workshop">{{
                  item.workshop
                }}
              </a-option>
            </a-select>
          </a-form-item>


          <a-form-item label="客户名称" label-col-flex="80px" :style="{width:'315px'}">
            <a-select popup-container="html" :loading="loading" :allowClear="true" @search="handleSearch"
                      v-model="pageData.customName"
                      :filter-option="false" allow-search @focus="focusSel">
              <a-option v-for="item in pageData.clothList" :value="item.customName">{{
                  item.customName
                }}
              </a-option>
            </a-select>
          </a-form-item>


          <a-form-item label="客户跟单" label-col-flex="80px" :style="{width:'315px'}">
            <a-select popup-container="html" :loading="loadingqw" :allowClear="true" @search="handleSearchqw"
                      v-model="pageData.merchandiser"
                      :filter-option="false" allow-search @focus="focusSelqw">
              <a-option v-for="item in dropDown.khgd" :value="item.merchandiser">{{
                  item.merchandiser
                }}
              </a-option>
            </a-select>
          </a-form-item>


          <a-form-item label="布号" label-col-flex="80px" :style="{width:'315px'}">
            <a-input default-value="content" v-model="pageData.greyCode" placeholder="" allow-clear
                     @press-enter="hccx"/>
          </a-form-item>


          <a-form-item label="日期" label-col-flex="80px" :style="{width:'315px'}">
            <a-range-picker popup-container="html" format="YYYY-MM-DD" @change="riqiChange" v-model="fwrqs.fwrq"
            />
          </a-form-item>
        </a-form>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18"/>
          <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18"/>
        </a-divider>
      </div>
      <div class="my-tool-bar">
        <!-- <Toolbar :items="['查询', '新增', '审核', '反审']" @add="addHandler" @import="importHandler" @del="deleteHandler"
          @select="selectHandler" @export="exports" @excel="downloadHandler" @audit="toExamine"
          @counter="counterExamination">
        </Toolbar> -->
        <div class="bg-container-1">
          <div>
            <el-button type="primary" :icon="Search" class="stbutencx" @click="selectHandler">查询</el-button>
            <el-button type="success" :icon="CirclePlus" class="stbutenxz" @click="addHandler">新增</el-button>
            <el-button plain :icon="Delete" @click="deleteHandlersss">删除</el-button>
            <el-button plain :icon="EditPen" @click="toExamine">审核</el-button>
            <el-button plain :icon="Edit" @click="counterExamination">反审</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="gang"></div>

  <div ref="tablediv" style="padding: 10px; box-sizing: border-box;min-height:100%;background-color: #fff;">
    <!-- <a-tabs   :justify="true">
      <a-tab-pane title="流转卡号列表">
        <a-table style="height: 100%;" size="mini" :scrollbar="scrollbar" sticky-header stripe :bordered="true"
          :columns="columns" :row-selection="{ showCheckedAll: true, width: 50, onlyCurrent: true, }"
          v-model:selected-keys="selectedRowKeys" :loading="table.tableLoading" :data="tableCon.tableConter"
          :pagination="false" :rowKey="rowKey">
          <template #ztslot="{ record }">
            <span>{{ record.auditState === 1 ? '已审核' : '未审核' }}</span>
          </template>
          <template #action="{ record }">
            <a-button type="primary" size="mini" status="warning" @click="editHandler(record)">
              <template #icon>
                <icon-edit />
              </template>
              修 改
            </a-button>
          </template>
        </a-table>
      </a-tab-pane>
    </a-tabs> -->
    <AgGridVuesCopys style="height:50vh;" class="ag-theme-alpine" :columnDefs="tc" :rowData="tableCon.tableConter"
                     :defaultColDef="defaultColDef" rowSelection="multiple" @grid-ready="gridReady">
    </AgGridVuesCopys>
    <paginationCopys :total="paging.total" :page-size="paging.size" v-model:current='pages' show-page-size show-total
                     show-jumper size="mini"
                     @change="pagingChange" @page-size-change="pagingSizeChange"/>
  </div>
  <!-- 新增或修改 -->
  <a-drawer :drawer-style="{ 'zIndex': 9999 }" :mask-closable="false" height="100%" :visible="pageData.showAdd"
            placement="bottom" unmountOnClose @ok="sideOk" @cancel="lzkgb" cancel-text='关闭' ok-text='保存'>
    <template #title>
      {{ pageData.sideTitle }}
    </template>
    <div style="min-width: 1600px;">
      <a-form ref="formRef" :model="dataForm">
        <a-row class="grid-demo" :gutter="10">
          <a-col :span="4">
            <a-form-item label="开卡日期" label-col-flex="100px" field="createOrderDate"
                         :validate-trigger="['change', 'blur']" :rules="[{ required: true, message: '开卡日期必填' }]">
              <a-date-picker popup-container="html" style="width:100%" format="YYYY-MM-DD"
                             v-model="dataForm.createOrderDate"/>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="流转卡号" label-col-flex="100px" field="flowCardCode"
                         :validate-trigger="['change', 'blur']"
                         :rules="[{ required: true, message: '流转卡号必填' }]">
              <a-input v-model="dataForm.flowCardCode" disabled
                       style="background-color: #f2f3f5; border:1px solid #cccccc;"/>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="订单号" label-col-flex="100px" field="" :validate-trigger="['change', 'blur']"
                         :rules="[{ required: false, message: '订单号必填' }]">
              <!-- <a-input v-model="dataForm.planOrderCode" /> -->
              <a-select popup-container="html" :loading="loadingdan" :allowClear="true" @search="handleSeardan"
                        v-model="dataForm.planOrderCode"
                        :filter-option="false" allow-search @focus="focusSedan" style="width:490px;"
                        @change="ddhgbqkbh">
                <a-option v-for="item in dropDown.didanhao" :value="item.orderCode">{{
                    item.orderCode
                  }}
                </a-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="布号" label-col-flex="100px" field="greyCode" :validate-trigger="['change', 'blur']"
                         :rules="[{ required: true, message: '布号必填' }]">
              <!-- <a-input v-model="dataForm.greyCode" /> -->
              <a-select popup-container="html" :loading="loadingbuhao" v-model="dataForm.greyCode"
                        :filter-option="false" allow-search
                        @focus="focusSebuhao" style="width:490px;">
                <a-option v-for="item in dropDown.buhaoxl" :value="item.clothCode">{{
                    item.clothCode
                  }}
                </a-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="品名" label-col-flex="100px" field="productName" :validate-trigger="['change', 'blur']"
                         :rules="[{ required: true, message: '品名必填' }]">
              <a-input v-model="dataForm.productName"/>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="色号" label-col-flex="100px" field="" :validate-trigger="['change', 'blur']"
                         :rules="[{ required: false, message: '色号必填' }]">
              <a-input v-model="dataForm.colorCode"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row class="grid-demo" :gutter="10">
          <a-col :span="4">
            <a-form-item label="色称" label-col-flex="100px" field="" :validate-trigger="['change', 'blur']"
                         :rules="[{ required: false, message: '色称必填' }]">
              <a-input v-model="dataForm.colorName"/>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="颜色深浅" label-col-flex="100px" field="colorDepth"
                         :validate-trigger="['change', 'blur']"
                         :rules="[{ required: true, message: '颜色深浅必填' }]">
              <a-input v-model="dataForm.colorDepth"/>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="开卡重量" label-col-flex="100px" field="flowCardWeight"
                         :validate-trigger="['change', 'blur']"
                         :rules="[{ required: true, message: '开卡重量必填' }]">
              <a-input-number v-model="dataForm.flowCardWeight" placeholder="Please Enter" class="input-demo"/>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="匹数" label-col-flex="100px" field="houseNum" :validate-trigger="['change', 'blur']"
                         :rules="[{ required: true, message: '匹数必填' }]">
              <a-input-number v-model="dataForm.houseNum" placeholder="Please Enter" class="input-demo"/>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="业务员" label-col-flex="100px" field="" :validate-trigger="['change', 'blur']"
                         :rules="[{ required: false, message: '业务员必填' }]">
              <a-input v-model="dataForm.salesman"/>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="客户名称" label-col-flex="100px" field="" :validate-trigger="['change', 'blur']"
                         :rules="[{ required: false, message: '客户名称必填' }]">
              <a-input v-model="dataForm.customName"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row class="grid-demo" :gutter="10">
          <a-col :span="4">
            <a-form-item label="订单条数" label-col-flex="100px" field="" :validate-trigger="['change', 'blur']"
                         :rules="[{ required: false, message: '订单条数必填' }]">
              <a-input-number v-model="dataForm.orderStripNum" placeholder="Please Enter" class="input-demo"/>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="订单重量" label-col-flex="100px" field="" :validate-trigger="['change', 'blur']"
                         :rules="[{ required: false, message: '订单重量必填' }]">
              <a-input-number v-model="dataForm.orderWeight" placeholder="Please Enter" class="input-demo"/>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="跟单员" label-col-flex="100px" field="" :validate-trigger="['change', 'blur']"
                         :rules="[{ required: false, message: '跟单员必填' }]">
              <a-input v-model="dataForm.merchandiser"/>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="开单日期" label-col-flex="100px" field="orderDate"
                         :validate-trigger="['change', 'blur']"
                         :rules="[{ required: true, message: '地址必填' }]">
              <a-date-picker popup-container="html" style="width:100%" format="YYYY-MM-DD"
                             v-model="dataForm.orderDate"/>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="湿擦提升" label-col-flex="100px" field="" :validate-trigger="['change', 'blur']"
                         :rules="[{ required: false, message: '湿擦提升必填' }]">
              <a-input v-model="dataForm.wetRubbing"/>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="测试标准" label-col-flex="100px" field="" :validate-trigger="['change', 'blur']"
                         :rules="[{ required: false, message: '测试标准必填' }]">
              <a-input v-model="dataForm.testCriteria"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row class="grid-demo" :gutter="10">
          <a-col :span="4">
            <a-form-item label="订单类型" label-col-flex="100px" field="" :validate-trigger="['change', 'blur']"
                         :rules="[{ required: false, message: '订单类型必填' }]">
              <a-input v-model="dataForm.orderType"/>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="生产交期" label-col-flex="100px" field="productionDate"
                         :validate-trigger="['change', 'blur']"
                         :rules="[{ required: true, message: '生产交期必填' }]">
              <a-date-picker popup-container="html" style="width:100%" format="YYYY-MM-DD"
                             v-model="dataForm.productionDate"/>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="染色类型" label-col-flex="100px" field="dyeingType"
                         :validate-trigger="['change', 'blur']"
                         :rules="[{ required: true, message: '染色类型必填' }]">
              <a-input v-model="dataForm.dyeingType"/>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="客订名称" label-col-flex="100px" field="" :validate-trigger="['change', 'blur']"
                         :rules="[{ required: false, message: '客订名称必填' }]">
              <a-input v-model="dataForm.customOrderName"/>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="耐氯提示" label-col-flex="100px" field="" :validate-trigger="['change', 'blur']"
                         :rules="[{ required: false, message: '耐氯提示必填' }]">
              <a-input v-model="dataForm.chlorineResistant"/>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="珠地边" label-col-flex="100px" field="" :validate-trigger="['change', 'blur']"
                         :rules="[{ required: false, message: '珠地边必填' }]">
              <a-input v-model="dataForm.edge"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row class="grid-demo" :gutter="10">
          <a-col :span="4">
            <a-form-item label="急单类别" label-col-flex="100px" field="" :validate-trigger="['change', 'blur']"
                         :rules="[{ required: false, message: '急单类别必填' }]">
              <a-input v-model="dataForm.anxiousOrderType"/>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="车间" label-col-flex="100px" field="workshop" :validate-trigger="['change', 'blur']"
                         :rules="[{ required: true, message: '车间必填' }]">
              <a-input v-model="dataForm.workshop"/>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="防沾处理" label-col-flex="100px" field="" :validate-trigger="['change', 'blur']"
                         :rules="[{ required: false, message: '防沾处理必填' }]">
              <a-input v-model="dataForm.stainResistance"/>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="撞白" label-col-flex="100px" field="" :validate-trigger="['change', 'blur']"
                         :rules="[{ required: false, message: '撞白必填' }]">
              <a-input v-model="dataForm.bumpWhite"/>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="敏感色" label-col-flex="100px" field="" :validate-trigger="['change', 'blur']"
                         :rules="[{ required: false, message: '敏感色必填' }]">
              <a-input v-model="dataForm.sensitiveColor"/>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="缸型" label-col-flex="100px" field="cylinderType" :validate-trigger="['change', 'blur']"
                         :rules="[{ required: true, message: '缸型必填' }]">
              <a-input v-model="dataForm.cylinderType"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row class="grid-demo" :gutter="10">
          <a-col :span="4">
            <a-form-item label="抗黄处理" label-col-flex="100px" field="" :validate-trigger="['change', 'blur']"
                         :rules="[{ required: false, message: '抗黄处理必填' }]">
              <a-input v-model="dataForm.resistanceYellow"/>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="拨印" label-col-flex="100px" field="" :validate-trigger="['change', 'blur']"
                         :rules="[{ required: false, message: '拨印必填' }]">
              <a-input v-model="dataForm.dialPrinting"/>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="对色资料" label-col-flex="100px" field="" :validate-trigger="['change', 'blur']"
                         :rules="[{ required: false, message: '对色资料必填' }]">
              <a-input v-model="dataForm.contrastColor"/>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="特敏感色" label-col-flex="100px" field="" :validate-trigger="['change', 'blur']"
                         :rules="[{ required: false, message: '特敏感色必填' }]">
              <a-input v-model="dataForm.specialSensitiveColor"/>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="生产流程" label-col-flex="100px" field="" :validate-trigger="['change', 'blur']"
                         :rules="[{ required: false, message: '生产流程必填' }]">
              <a-input v-model="dataForm.productionProcess"/>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="RC处理" label-col-flex="100px" field="" :validate-trigger="['change', 'blur']"
                         :rules="[{ required: false, message: 'RC处理必填' }]">
              <a-input v-model="dataForm.rcInfo"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row class="grid-demo" :gutter="10">
          <a-col :span="4">
            <a-form-item label="管型" label-col-flex="100px" field="tubeType" :validate-trigger="['change', 'blur']"
                         :rules="[{ required: true, message: '管型必填' }]">
              <a-input-number v-model="dataForm.tubeType" placeholder="Please Enter" class="input-demo"/>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="染整订单号" label-col-flex="100px" field="" :validate-trigger="['change', 'blur']"
                         :rules="[{ required: false, message: '染整订单号必填' }]">
              <a-input v-model="dataForm.dyeOrderCode"/>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="流转卡归类" label-col-flex="100px" field="exchangeCalorieClassify"
                         :validate-trigger="['change', 'blur']"
                         :rules="[{ required: true, message: '染整订单号必填' }]">
              <!-- <a-input v-model="dataForm.exchangeCalorieClassify" /> -->
              <a-select popup-container="html" :loading="loadingzx" :allowClear="true" @search="handleSearchzx"
                        v-model="dataForm.exchangeCalorieClassify" :filter-option="false" allow-search
                        @focus="focusSelzx"
                        @change="lzkglChange">
                <a-option v-for="item in dropDown.lzkgl" :value="item.exchangeCalorieClassify">{{
                    item.exchangeCalorieClassify
                  }}
                </a-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="最终交货日期" label-col-flex="100px" field="" :validate-trigger="['change', 'blur']"
                         :rules="[{ required: false, message: '最终交货日期必填' }]">
              <a-date-picker popup-container="html" style="width:100%" format="YYYY-MM-DD"
                             v-model="dataForm.lastDeliveryDate"/>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="总部交货日期" label-col-flex="100px" field="" :validate-trigger="['change', 'blur']"
                         :rules="[{ required: false, message: '总部交货日期必填' }]">
              <a-date-picker popup-container="html" style="width:100%" format="YYYY-MM-DD"
                             v-model="dataForm.hqDeliveryDate"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <div style="margin-top:20px;">
        <a-tabs   :lazy-load="true" :justify="true" default-active-key="1">
          <a-tab-pane key="1" title="布种要求">
            <div class="tjan">
              <!-- <div class="shruq-but" @click="bzyqAdd">
                <span>添加</span>
              </div> -->
              <el-button type="success" :icon="CirclePlus" class="stbutenxz" @click="bzyqAdd">新增</el-button>
            </div>
            <AgGridVuesCopys style="height:400px" class="ag-theme-alpine" :columnDefs="tcy" :rowData="tableCon.bzyq"
                             :defaultColDef="defaultColDefy" :enableColResize="true" rowSelection="multiple"
                             @grid-ready="gridReadye">
            </AgGridVuesCopys>
          </a-tab-pane>
          <a-tab-pane key="2" title="缸管配坯">
            <div class="tjan">
              <!-- <div class="shruq-but" @click="grayClothDetails">
                <span>明细</span>
              </div> -->
              <el-button plain :icon="Tickets" @click="grayClothDetails">明细</el-button>
              &nbsp;
              <!-- <div class="shruq-buts" @click="deleteHandler">
                <span>删除</span>
              </div> -->
              <el-button plain :icon="Delete" @click="deleteHandler">删除</el-button>
            </div>
            <!-- <a-table style="height: 100%;" size="mini" :scrollbar="scrollbar" sticky-header stripe :bordered="true"
              :columns="brandInformationbt" :row-selection="{ showCheckedAll: true, width: 50, onlyCurrent: true, }"
              v-model:selected-keys="selectedRowKeysas" :loading="table.tableLoading" :data="tableCon.ggpp"
              :pagination="false" :summary="summary" :rowKey="rowKeyqw" :scroll="scroll">
            </a-table>
            <template #summary-cell="{ column, record, rowIndex }">
              <div :style="getColorStyle(column, record)">{{ record[column.dataIndex] }}</div>
            </template> -->
            <AgGridVuesCopys style="height:400px" class="ag-theme-alpine" :columnDefs="brandInformationbt"
                             :rowData="tableCon.ggpp" :defaultColDef="defaultColDefp" :enableColResize="true"
                             rowSelection="multiple"
                             @grid-ready="gridReadyp">
            </AgGridVuesCopys>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </a-drawer>
  <!-- 坯布明细 -->
  <a-drawer :drawer-style="{ 'zIndex': 9999 }" :mask-closable="false" height="100%" :visible="pageData.showAdds"
            placement="bottom" unmountOnClose @ok="sideOkqw" @cancel="djqxiao" cancel-text='关闭' ok-text='保存'>
    <template #title>
      坯布明细
    </template>
    <div>
      <div class="bg-container">
        <!-- 查询条件 -->
        <div class="my-header">
          <div class="search-form" v-if="headerShow">
            <a-form size="small" :model="pageData" layout="inline">
              <a-form-item label="收料单号">
                <a-input default-value="content" v-model="pageData.dropDownData" placeholder="" allow-clear
                         @press-enter="huiche"/>
              </a-form-item>
            </a-form>
          </div>
          <div class="my-divisders">
            <a-divider orientation="center">
              <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18"/>
              <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18"/>
            </a-divider>
          </div>
          <div class="my-tool-bar">
            <!-- <Toolbar :items="['查询',]" @add="addHandler" @import="importHandler" @del="deleteHandler" @select="selectmx"
              @export="exports" @excel="downloadHandler">
            </Toolbar> -->
            <el-button type="primary" :icon="Search" class="stbutencx" @click="selectmx">查询</el-button>
          </div>
        </div>
      </div>
      <!-- <a-tabs   :justify="true" default-active-key="1">
        <a-tab-pane key="1" title="坯布明细">
          <a-table style="height: 100%;" size="mini" :scrollbar="scrollbar" sticky-header stripe :bordered="true"
            :columns="shippingInformationbt" :row-selection="{ showCheckedAll: true, width: 50, onlyCurrent: true, }"
            v-model:selected-keys="selectedRowKeysqw" :loading="table.tableLoading" :data="tableCon.ckxq"
            :pagination="false" :rowKey="rowKeyqw" :summary="summary">
            <template #summary-cell="{ column, record, rowIndex }">
              <div :style="getColorStyle(column, record)">{{ record[column.dataIndex] }}</div>
            </template>
          </a-table>
        </a-tab-pane>
      </a-tabs> -->
      <AgGridVuesCopys style="height:74vh" class="ag-theme-alpine" :columnDefs="shippingInformationbt"
                       :rowData="tableCon.ckxq" :defaultColDef="defaultColDefs" :enableColResize="true"
                       rowSelection="multiple"
                       @grid-ready="gridReadys">
      </AgGridVuesCopys>
    </div>
  </a-drawer>
</template>

<script lang="ts">
import {post, get} from "@/api/http";
import {Search, CirclePlus, Delete, EditPen, Tickets, Edit} from "@element-plus/icons-vue";
import {
  useTable,
  useRowKey,
  useTableColumn,
  usePagination,
  useRowSelection,
} from "@/hooks/table";

import {ref, reactive, onMounted, onActivated, onUnmounted} from "vue";
import Toolbar from "@/components/Toolbar.vue";
import {Form, Message, Modal, Pagination} from "@arco-design/web-vue";
import {FormInstance} from "@arco-design/web-vue/es/form";
import emitter from "@/hooks/useEventBus";
import validate from "@/hooks/useValidate";
//import { baseURL } from '../../../api/axios.config'
import axios from "axios";
import filedownload from 'js-file-download'
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-alpine.css";
import {} from "ag-grid-vue3";

interface ClothSet {
  id?: any;
  serialNumber?: number | undefined,
  mercery?: string | undefined;
  deleteState?: any
  remark?: string | undefined;
  createName?: string | undefined;
  createTime?: string | undefined;
  updateName?: string | undefined;
  updateTime?: string | undefined;
  createOrderDate?: string | undefined;
  flowCardCode?: string | undefined;
  planOrderCode?: string | undefined;
  greyCode?: string | undefined;//布号
  productName?: string | undefined;
  colorCode?: string | undefined;
  colorName?: string | undefined;
  colorDepth?: string | undefined;
  flowCardWeight?: number | undefined;
  houseNum?: number | undefined;
  salesman?: string | undefined;
  customName?: string | undefined;
  orderStripNum?: number | undefined;
  orderWeight?: number | undefined;
  merchandiser?: string | undefined;
  orderDate?: string | undefined;
  wetRubbing?: string | undefined;
  testCriteria?: string | undefined;
  productionDate?: string | undefined;
  orderType?: string | undefined;
  dyeingType?: string | undefined;
  customOrderName?: string | undefined;
  chlorineResistant?: string | undefined;
  edge?: string | undefined;
  anxiousOrderType?: string | undefined;
  workshop?: string | undefined;
  stainResistance?: string | undefined;
  bumpWhite?: string | undefined;
  sensitiveColor?: string | undefined;
  cylinderType?: string | undefined;
  resistanceYellow?: string | undefined;
  dialPrinting?: string | undefined;
  contrastColor?: string | undefined;
  specialSensitiveColor?: string | undefined;
  productionProcess?: string | undefined;
  rcInfo?: string | undefined;
  tubeType?: number | undefined;
  dyeOrderCode?: string | undefined;
  requiredItems?: string | undefined;
  nowRequirement?: string | undefined;
  defaultRequirement?: string | undefined;
  unit?: string | undefined;
  greyType?: string | undefined;
  exchangeCalorieClassify?: string | undefined;
  lastDeliveryDate?: string | undefined;
  hqDeliveryDate?: string | undefined;
}

interface pagings {
  size: number | string,
  total: number | string,
}

export default {
  name: "lzkhList",
  setup() {
    const headerShow = ref<boolean>(true)
    //查询
    const scrollbar = ref(true)
    const pages = ref(1);
    const paging: pagings = reactive({
      size: 10,
      total: 30,
    })

    function doRefresh() {

      pageData.pageLoading = true

      post({
        url: "/aps/circulatCard/getPage",
        data: {
          page: pages.value,
          limit: paging.size,
          deleteState: 0,
          flowCardCode: pageData.flowCardCode, //流转卡号
          colorCode: pageData.colorCode, //色号
          greyCode: pageData.greyCode, //布号
          workshop: pageData.workshop, //车间
          customName: pageData.customName, //客户名称
          merchandiser: pageData.merchandiser, //客户跟单
          auditState: pageData.auditState, //订单状态
          startDate: pageData.startDate, //开始时间 ( 小于结束时间 )
          endDate: pageData.endDate, //结束时间
        },
      })
          .then(({data, code}: any) => {
            if (code === 200) {

              //  console.log(data, "结果");
              tableCon.tableConter = data.data;
              paging.total = data.total;

            }
          })
          .catch(console.log).finally(() => {
        pageData.pageLoading = false
      })
    }

    // 明细查询
    function doRefreshmx() {

      pageData.pageLoading = true

      post({
        url: "aps/circulatCard/getInfoByDeliveryCode",
        data: {
          deliveryCode: pageData.dropDownData,
          stockState: 1
        },
      })
          .then(({data, code}: any) => {
            //  console.log(data, "mingxisssssssssss");
            if (code === 200) {
              tableCon.ckxq = data
              count();
              // pagination.setTotalSize(data.total);

            }
          })
          .catch(console.log).finally(() => {
        pageData.pageLoading = false
      })
    }

    function hqdqrq() {
      var myDate = new Date();
      var Y = myDate.getFullYear();
      var M = myDate.getMonth() + 1;
      //  console.log(M,"月份")
      var D = myDate.getDate();
      if (M < 10) {
        M = '0' + M
      }
      if (D < 10) {
        D = '0' + D
      }
      var ymd = Y + '-' + M + '-' + D
      dataForm.orderDate = ymd
      return Y + M + D
    }

    const {selectedRowKeys, onSelectionChange} = useRowSelection();
    const pagination = usePagination(doRefresh);
    const table = useTable();
    const rowKey = useRowKey("id");
    const rowKeyqw = useRowKey("id");
    //检验表单是否含有中文的方法
    const hasChiese = validate.includeChinese;
    const columns = [
      {
        title: '开卡日期',
        key: "createOrderDate",
        width: 150,
        dataIndex: 'createOrderDate',
        align: "center"
      },
      {
        title: '流转卡号',
        key: "flowCardCode",
        width: 150,
        dataIndex: 'flowCardCode',
        align: "center"
      },
      {
        title: '订单号',
        key: "planOrderCode",
        width: 150,
        dataIndex: 'planOrderCode',
        align: "center"
      },
      {
        title: '布号',
        key: "greyCode",
        width: 150,
        dataIndex: 'greyCode',
        align: "center"
      },
      {
        title: '品名',
        key: "productName",
        width: 150,
        dataIndex: 'productName',
        align: "center"
      },
      {
        title: '色号',
        key: "colorCode",
        width: 150,
        dataIndex: 'colorCode',
        align: "center"
      },
      {
        title: '色称',
        key: "colorName",
        width: 150,
        dataIndex: 'colorName',
        align: "center"
      },
      {
        title: '颜色深浅',
        key: "colorDepth",
        width: 150,
        dataIndex: 'colorDepth',
        align: "center"
      },
      {
        title: '开卡重量',
        key: "flowCardWeight",
        width: 150,
        dataIndex: 'flowCardWeight',
        align: "center"
      },
      {
        title: '匹数',
        key: "houseNum",
        width: 150,
        dataIndex: 'houseNum',
        align: "center"
      },
      {
        title: '业务员',
        key: "salesman",
        width: 150,
        dataIndex: 'salesman',
        align: "center"
      },
      {
        title: '客户名称',
        key: "customName",
        width: 150,
        dataIndex: 'customName',
        align: "center"
      },
      {
        title: '订单条数',
        key: "orderStripNum",
        width: 150,
        dataIndex: 'orderStripNum',
        align: "center"
      },
      {
        title: '订单重量',
        key: "orderWeight",
        width: 150,
        dataIndex: 'orderWeight',
        align: "center"
      },
      {
        title: '客户跟单',
        key: "merchandiser",
        width: 150,
        dataIndex: 'merchandiser',
        align: "center"
      },
      {
        title: '开单日期',
        key: "orderDate",
        width: 150,
        dataIndex: 'orderDate',
        align: "center"
      },
      {
        title: '湿擦提升',
        key: "wetRubbing",
        width: 150,
        dataIndex: 'wetRubbing',
        align: "center"
      },
      {
        title: '测试标准',
        key: "testCriteria",
        width: 150,
        dataIndex: 'testCriteria',
        align: "center"
      },
      {
        title: '订单类型',
        key: "orderType",
        width: 150,
        dataIndex: 'orderType',
        align: "center"
      },
      {
        title: '生产交期',
        key: "productionDate",
        width: 150,
        dataIndex: 'productionDate',
        align: "center"
      },
      {
        title: '染整订单号',
        key: "dyeOrderCode",
        width: 150,
        dataIndex: 'dyeOrderCode',
        align: "center"
      },
      {
        title: '客订名称',
        key: "customOrderName",
        width: 150,
        dataIndex: 'customOrderName',
        align: "center"
      },
      {
        title: '耐氯提示',
        key: "chlorineResistant",
        width: 150,
        dataIndex: 'chlorineResistant',
        align: "center"
      },
      {
        title: '急单类别',
        key: "anxiousOrderType",
        width: 150,
        dataIndex: 'anxiousOrderType',
        align: "center"
      },
      {
        title: '车间',
        key: "workshop",
        width: 150,
        dataIndex: 'workshop',
        align: "center"
      },
      {
        title: '防沾处理',
        key: "stainResistance",
        width: 150,
        dataIndex: 'stainResistance',
        align: "center"
      },
      {
        title: '撞白',
        key: "bumpWhite",
        width: 150,
        dataIndex: 'bumpWhite',
        align: "center"
      },
      {
        title: '敏感色',
        key: "sensitiveColor",
        width: 150,
        dataIndex: 'sensitiveColor',
        align: "center"
      },
      {
        title: '抗黄处理',
        key: "resistanceYellow",
        width: 150,
        dataIndex: 'resistanceYellow',
        align: "center"
      },
      {
        title: '拨印',
        key: "dialPrinting",
        width: 150,
        dataIndex: 'dialPrinting',
        align: "center"
      },
      {
        title: '对色资料',
        key: "contrastColor",
        width: 150,
        dataIndex: 'contrastColor',
        align: "center"
      },
      {
        title: '特敏感色',
        key: "specialSensitiveColor",
        width: 150,
        dataIndex: 'specialSensitiveColor',
        align: "center"
      },
      {
        title: 'RC处理',
        key: "rcInfo",
        width: 150,
        dataIndex: 'rcInfo',
        align: "center"
      },
      {
        title: '染色类型',
        key: "dyeingType",
        width: 150,
        dataIndex: 'dyeingType',
        align: "center"
      },
      {
        title: '珠地边',
        key: "edge",
        width: 150,
        dataIndex: 'edge',
        align: "center"
      },
      {
        title: '生产流程',
        key: "productionProcess",
        width: 150,
        dataIndex: 'productionProcess',
        align: "center"
      },
      {
        title: '管型',
        key: "tubeType",
        width: 150,
        dataIndex: 'tubeType',
        align: "center"
      },
      {
        title: '缸管',
        key: "cylinderType",
        width: 150,
        dataIndex: 'cylinderType',
        align: "center"
      },
      {
        title: '状态',
        key: "auditState",
        width: 150,
        dataIndex: 'auditState',
        slotName: "ztslot",
        align: "center"
      },
      {
        title: '建立人',
        key: "createName",
        width: 150,
        dataIndex: 'createName',
        align: "center"
      },
      {
        title: '建立时间',
        key: "createTime",
        width: 150,
        dataIndex: 'createTime',
        align: "center"
      },
      {
        title: '修改人',
        key: "updateName",
        width: 150,
        dataIndex: 'updateName',
        align: "center"
      },
      {
        title: '修改时间',
        key: "updateTime",
        width: 150,
        dataIndex: 'updateTime',
        align: "center"
      },
      {
        title: '操作',
        key: "id",
        width: 150,
        dataIndex: 'id',
        slotName: "action",
        fixed: 'right',
        align: "center"
      },
    ];
    /************************************** */
    const columnDefs = [
      {
        headerName: '',//选择列头部显示的文字，可以为空
        checkboxSelection: true,//设置为ture显示为复选框
        headerCheckboxSelection: true, //表头是否也显示复选框，全选反选用
        pinned: 'left', //固定再左边
        width: 50 //列的宽度
      },
      {headerName: "开卡日期", field: "createOrderDate", width: 120},
      {headerName: "流转卡号", field: "flowCardCode", width: 120},
      {headerName: "订单号", field: "planOrderCode", width: 120},
      {headerName: "布号", field: "greyCode", width: 120},
      {headerName: "品名", field: "productName", width: 120},
      {headerName: "色号", field: "colorCode", width: 120},
      {headerName: "色称", field: "colorName", width: 120},
      {headerName: "颜色深浅", field: "colorDepth", width: 120},
      {headerName: "开卡重量", field: "flowCardWeight", width: 120},
      {headerName: "匹数", field: "houseNum", width: 120},
      {headerName: "业务员", field: "salesman", width: 120},
      {headerName: "客户名称", field: "customName", width: 120},
      {headerName: "订单条数", field: "orderStripNum", width: 120},
      {headerName: "订单重量", field: "orderWeight", width: 120},
      {headerName: "客户跟单", field: "merchandiser", width: 120},
      {headerName: "开单日期", field: "orderDate", width: 120},
      {headerName: "湿擦提升", field: "wetRubbing", width: 120},
      {headerName: "测试标准", field: "testCriteria", width: 120},
      {headerName: "订单类型", field: "orderType", width: 120},
      {headerName: "生产交期", field: "productionDate", width: 120},
      {headerName: "染整订单号", field: "dyeOrderCode", width: 120},
      {headerName: "客订名称", field: "customOrderName", width: 120},
      {headerName: "耐氯提示", field: "chlorineResistant", width: 120},
      {headerName: "急单类型", field: "anxiousOrderType", width: 120},
      {headerName: "车间", field: "workshop", width: 120},
      {headerName: "防沾处理", field: "stainResistance", width: 120},
      {headerName: "撞白", field: "bumpWhite", width: 120},
      {headerName: "敏感色", field: "sensitiveColor", width: 120},
      {headerName: "抗黄处理", field: "resistanceYellow", width: 120},
      {headerName: "拔印", field: "dialPrinting", width: 120},
      {headerName: "对色资料", field: "contrastColor", width: 120},
      {headerName: "特敏感色", field: "specialSensitiveColor", width: 120},
      {headerName: "RC处理", field: "rcInfo", width: 120},
      {headerName: "染色类型", field: "dyeingType", width: 120},
      {headerName: "珠地边", field: "edge", width: 120},
      {headerName: "生产流程", field: "productionProcess", width: 120},
      {headerName: "管型", field: "tubeType", width: 120},
      {headerName: "缸型", field: "cylinderType", width: 120},
      {headerName: "状态", field: "auditState", width: 120},
      {headerName: "建立人", field: "createName", width: 120},
      {headerName: "建立时间", field: "createTime",},
      {headerName: "修改人", field: "updateName", width: 120},
      {headerName: "修改时间", field: "updateTime",},
      {headerName: "操作",},

    ];
    const rowData = [
      {make: "Toyota", model: "Celica", price: 35000},
      {make: "Ford", model: "Mondeo", price: 32000},
      {make: "Porsche", model: "Boxster", price: 72000},
      {make: "Toyota", model: "Celica", price: 35000},
      {make: "Ford", model: "Mondeo", price: 32000},
      {make: "Porsche", model: "Boxster", price: 72000},
      {make: "Toyota", model: "Celica", price: 35000},
      {make: "Ford", model: "Mondeo", price: 32000},
      {make: "Porsche", model: "Boxster", price: 72000},
    ];
    const defaultColDef = {
      sortable: true,
      filter: true,
      //flex: null,
      resizable: true,
    };
    let tc: any[] = columnDefs.map((o) => {
      //let obj = {}
      if (o.headerName === '操作') {
        o['resizable'] = false
        o['filter'] = false
        o['sortable'] = false
        o["pinned"] = "right"
        o["width"] = 80
        o['cellRenderer'] = {
          template: `
            <el-button style="color:#165dff;" link @click="a">修改</el-button>`,
          setup(props: any) {
            const a = () => {
              editHandler(props.params.data)
            }
            return {
              a
            }
          }

        }
      }
      return o
    })
    const gridOption = ref()
    const gridReady = (params: any) => {
      // console.log(params, 123321);
      gridOption.value = params.api
    }
    /***************************************** */
    const fwrqs = reactive({
      fwrq: []
    })
    const tableCon = reactive({
      tableConter: [],
      bzyq: [
        {
          requiredItems: "",
          nowRequirement: "",
          defaultRequirement: "",
          unit: "",
          greyCode: "",
          greyType: "",
          remark: ""
        }
      ],
      ggpp: [],
      ckxq: [],
    });
    //布种要求表头
    // const InformationEnglishbt = [
    //   {
    //     title: '要求项目',
    //     key: "requiredItems",
    //     width: 150,
    //     dataIndex: 'requiredItems',
    //     slotName: "requiredItems",
    //     align: "center"
    //   },
    //   {
    //     title: '本次要求',
    //     key: "nowRequirement",
    //     width: 150,
    //     dataIndex: 'nowRequirement',
    //     slotName: "nowRequirement",
    //     align: "center"
    //   },
    //   {
    //     title: '默认要求',
    //     key: "defaultRequirement",
    //     width: 150,
    //     dataIndex: 'defaultRequirement',
    //     slotName: "defaultRequirement",
    //     align: "center"
    //   },
    //   {
    //     title: '单位',
    //     key: "unit",
    //     width: 150,
    //     dataIndex: 'unit',
    //     slotName: "unit",
    //     align: "center"
    //   },
    //   {
    //     title: '布号',
    //     key: "greyCode",
    //     width: 150,
    //     dataIndex: 'greyCode',
    //     slotName: "greyCode",
    //     align: "center"
    //   },
    //   {
    //     title: '布种',
    //     key: "greyType",
    //     width: 150,
    //     dataIndex: 'greyType',
    //     slotName: "greyType",
    //     align: "center"
    //   },
    //   {
    //     title: '备注',
    //     key: "remark",
    //     width: 150,
    //     dataIndex: 'remark',
    //     slotName: "remark",
    //     align: "center"
    //   },
    //   {
    //     title: '操作',
    //     key: "id",
    //     width: 150,
    //     dataIndex: 'id',
    //     slotName: "action",
    //     fixed: 'right',
    //     align: "center"
    //   },
    // ];
    /************************************** */
    const InformationEnglishbt = [
      // {
      //     headerName: '',//选择列头部显示的文字，可以为空
      //     checkboxSelection: true,//设置为ture显示为复选框
      //     headerCheckboxSelection: true, //表头是否也显示复选框，全选反选用
      //     pinned: 'left', //固定再左边
      //     width: 50 //列的宽度
      // },
      {headerName: "要求项目", field: "requiredItems",},
      {headerName: "本次要求", field: "nowRequirement",},
      {headerName: "默认要求", field: "defaultRequirement",},
      {headerName: "单位", field: "unit",},
      {headerName: "布号", field: "greyCode",},
      {headerName: "布种", field: "greyType",},
      {
        headerName: "备注", field: "remark",
        cellEditor: 'agLargeTextCellEditor', //编辑时 显示长文本框**************
        cellEditorParams: {
          maxLength: '300',
          cols: '50',
          rows: '6'
        }
      },
      {headerName: "操作",},

    ];
    const defaultColDefy = {
      sortable: true,
      filter: true,
      // flex: 1,
      resizable: true,
      editable: true,
    };
    let tcy: any[] = InformationEnglishbt.map((o) => {
      //let obj = {}
      if (o.headerName === '操作') {
        o['resizable'] = true
        o['filter'] = false
        o['sortable'] = false
        o["pinned"] = "right"
        o["width"] = 70
        o['cellRenderer'] = {
          template: `
            <div>
              <el-button style="color:#165dff;" link @click="s">刪除</el-button>
            </div>`,
          setup(props: any) {
            const s = () => {
              deleteBzyq(props.params.rowIndex)
            }
            return {
              s
            }
          }

        }
      }
      return o
    })
    const gridOptiony = ref()
    const gridReadye = (params: any,) => {
      gridOptiony.value = params.api
      // console.log("触发");
    }
    /***************************************** */
    //缸管配坯表头
    // const brandInformationbt = [
    //   {
    //     title: '坯布编号',
    //     key: "greyCode",
    //     width: 150,
    //     dataIndex: 'greyCode',
    //     align: "center"
    //   },
    //   {
    //     title: '坯布名称',
    //     key: "greyName",
    //     width: 150,
    //     dataIndex: 'greyName',
    //     align: "center"
    //   },
    //   {
    //     title: '入库单号',
    //     key: "deliveryCode",
    //     width: 150,
    //     dataIndex: 'deliveryCode',
    //     align: "center"
    //   },
    //   {
    //     title: '仓库',
    //     key: "warehouseName",
    //     width: 150,
    //     dataIndex: 'warehouseName',
    //     align: "center"
    //   },
    //   {
    //     title: '库位',
    //     key: "storageName",
    //     width: 150,
    //     dataIndex: 'storageName',
    //     align: "center"
    //   },
    //   {
    //     title: '布笼号',
    //     key: "shelveCode",
    //     width: 150,
    //     dataIndex: 'shelveCode',
    //     align: "center"
    //   },
    //   {
    //     title: '可用匹数',
    //     key: "canUseHouseNum",
    //     width: 150,
    //     dataIndex: 'canUseHouseNum',
    //     align: "center"
    //   },
    //   {
    //     title: '可用重量',
    //     key: "canUseWeight",
    //     width: 150,
    //     dataIndex: 'canUseWeight',
    //     align: "center"
    //   },
    //   {
    //     title: '色称',
    //     key: "colorName",
    //     width: 150,
    //     dataIndex: 'colorName',
    //     align: "center"
    //   },
    //   {
    //     title: '纱支',
    //     key: "yarnCount",
    //     width: 150,
    //     dataIndex: 'yarnCount',
    //     align: "center"
    //   },
    //   {
    //     title: '纱批号',
    //     key: "yarnBatch",
    //     width: 150,
    //     dataIndex: 'yarnBatch',
    //     align: "center"
    //   },
    //   {
    //     title: '单位',
    //     key: "unit",
    //     width: 150,
    //     dataIndex: 'unit',
    //     align: "center"
    //   },
    //   {
    //     title: '送货单位',
    //     key: "deliveryDepartment",
    //     width: 150,
    //     dataIndex: 'deliveryDepartment',
    //     align: "center"
    //   },
    // ];
    /************************************** */
    const brandInformationbt = [
      {
        headerName: '',//选择列头部显示的文字，可以为空
        checkboxSelection: true,//设置为ture显示为复选框
        headerCheckboxSelection: true, //表头是否也显示复选框，全选反选用
        pinned: 'left', //固定再左边
        width: 50 //列的宽度
      },
      {headerName: "坯布编号", field: "greyCode",},
      {headerName: "坯布名称", field: "greyName",},
      {headerName: "入库单号", field: "deliveryCode",},
      {headerName: "仓库", field: "warehouseName",},
      {headerName: "库位", field: "storageName",},
      {headerName: "布笼号", field: "shelveCode",},
      {headerName: "可用匹数", field: "canUseHouseNum",},
      {headerName: "可用重量", field: "canUseWeight",},
      {headerName: "色称", field: "colorName",},
      {headerName: "色号", field: "colorCode",},
      {headerName: "纱支", field: "yarnCount",},
      {headerName: "纱批号", field: "yarnBatch",},
      {headerName: "单位", field: "unit",},
      {headerName: "送货单位", field: "deliveryDepartment",},

    ];
    const defaultColDefp = {
      sortable: true,
      filter: true,
      // flex: 1,
      resizable: true,
      // editable: true,
    };
    // let tcp: any[] = brandInformationbt.map((o) => {
    //   //let obj = {}
    //   if (o.headerName === '操作') {
    //     o['resizable'] = true
    //     o['filter'] = false
    //     o['sortable'] = false
    //     o["pinned"] = "right"
    //     o["width"] = 70
    //     o['cellRenderer'] = {
    //       template: `<div>
    //                            <a-tag color="#f53f3f"  @click="s">删除</a-tag>
    //                           </div>`,
    //       setup(props: any) {
    //         const s = () => {
    //           deletePinpai(props.params.rowIndex)
    //         }
    //         return {
    //           s
    //         }
    //       }

    //     }
    //   }
    //   return o
    // })
    const gridOptionp = ref()
    const gridReadyp = (params: any,) => {
      gridOptionp.value = params.api
      //  console.log("触发");
    }

    /**********底部合计******* */
    function counts() {
      var pvCount = 0;
      var ipCount = 0;
      for (var i = 0; i < tableCon.ggpp.length; i++) {
        pvCount = pvCount + tableCon.ggpp[i].canUseHouseNum;
        ipCount = ipCount + tableCon.ggpp[i].canUseWeight;
      }


      var topRows = [
        {headerName: '合计', canUseHouseNum: pvCount, canUseWeight: ipCount}
      ];
      gridOptionp.value.setPinnedBottomRowData(topRows);
      // setTimeout(function () { gridOptionp.value.updateRowData (tableCon.ggpp); }, 0);

    }

    /***************************************** */
    //详情表头
    // const shippingInformationbt = [
    //   {
    //     title: '仓库名称',
    //     key: "warehouseName",
    //     width: 150,
    //     dataIndex: 'warehouseName',
    //     align: "center"
    //   },
    //   {
    //     title: '收料单号',
    //     key: "deliveryCode",
    //     width: 150,
    //     dataIndex: 'deliveryCode',
    //     align: "center"
    //   },
    //   {
    //     title: '库位',
    //     key: "storageName",
    //     width: 150,
    //     dataIndex: 'storageName',
    //     align: "center"
    //   },
    //   {
    //     title: '布笼号',
    //     key: "shelveCode",
    //     width: 150,
    //     dataIndex: 'shelveCode',
    //     align: "center"
    //   },
    //   {
    //     title: '坯布编号',
    //     key: "greyCode",
    //     width: 150,
    //     dataIndex: 'greyCode',
    //     align: "center"
    //   },
    //   {
    //     title: '坯布名称',
    //     key: "greyName",
    //     width: 150,
    //     dataIndex: 'greyName',
    //     align: "center"
    //   },
    //   {
    //     title: '可用匹数',
    //     key: "canUseHouseNum",
    //     width: 150,
    //     dataIndex: 'canUseHouseNum',
    //     align: "center"
    //   },
    //   {
    //     title: '可用数量',
    //     key: "canUseWeight",
    //     width: 150,
    //     dataIndex: 'canUseWeight',
    //     align: "center"
    //   },
    //   {
    //     title: '色称',
    //     key: "colorName",
    //     width: 150,
    //     dataIndex: 'colorName',
    //     align: "center"
    //   },
    //   {
    //     title: '纱支',
    //     key: "yarnCount",
    //     width: 150,
    //     dataIndex: 'yarnCount',
    //     align: "center"
    //   },
    //   {
    //     title: '纱批号',
    //     key: "yarnBatch",
    //     width: 150,
    //     dataIndex: 'yarnBatch',
    //     align: "center"
    //   },
    //   {
    //     title: '单位',
    //     key: "unit",
    //     width: 150,
    //     dataIndex: 'unit',
    //     align: "center"
    //   },
    //   {
    //     title: '送货单位',
    //     key: "deliveryDepartment",
    //     width: 150,
    //     dataIndex: 'deliveryDepartment',
    //     align: "center"
    //   },
    //   {
    //     title: '入库日期',
    //     key: "stockInDate",
    //     width: 150,
    //     dataIndex: 'stockInDate',
    //     align: "center"
    //   },
    // ];
    /************************************** */
    const shippingInformationbt = [
      {
        headerName: '',//选择列头部显示的文字，可以为空
        checkboxSelection: true,//设置为ture显示为复选框
        headerCheckboxSelection: true, //表头是否也显示复选框，全选反选用
        pinned: 'left', //固定再左边
        width: 50 //列的宽度
      },
      {headerName: "仓库名称", field: "warehouseName",},
      {headerName: "入库单号", field: "deliveryCode",},
      {headerName: "库位", field: "storageName",},
      {headerName: "布笼号", field: "shelveCode",},
      {headerName: "坯布编号", field: "greyCode",},
      {headerName: "坯布名称", field: "greyName",},
      {headerName: "可用匹数", field: "canUseHouseNum",},
      {headerName: "可用数量", field: "canUseWeight",},
      {headerName: "色称", field: "colorName",},
      {headerName: "色号", field: "colorCode",},
      {headerName: "纱支", field: "yarnCount",},
      {headerName: "纱批号", field: "yarnBatch",},
      {headerName: "单位", field: "unit",},
      {headerName: "送货单位", field: "deliveryDepartment",},
      {headerName: "入库日期", field: "stockInDate",},
      // {
      //   headerName: "备注", field: "remark",
      //   cellEditor: 'agLargeTextCellEditor', //编辑时 显示长文本框**************
      //   cellEditorParams: {
      //     maxLength: '300',
      //     cols: '50',
      //     rows: '6'
      //   }
      // },
      // { headerName: "操作", },

    ];
    const defaultColDefs = {
      sortable: true,
      filter: true,
      // flex: 1,
      resizable: true,
      // editable: true,
    };
    // let tcs: any[] = shippingInformationbt.map((o) => {
    //   //let obj = {} 
    //   if (o.headerName === '操作') {
    //     o['resizable'] = true
    //     o['filter'] = false
    //     o['sortable'] = false
    //     o["pinned"] = "right"
    //     o["width"] = 70
    //     o['cellRenderer'] = {
    //       template: `<div>
    //                            <a-tag color="#f53f3f"  @click="s">删除</a-tag>
    //                           </div>`,
    //       setup(props: any) {
    //         const s = () => {
    //           deleteSonghuo(props.params.rowIndex)
    //         }
    //         return {
    //           s
    //         }
    //       }

    //     }
    //   }
    //   return o
    // })
    const gridOptions = ref()
    const gridReadys = (params: any,) => {
      gridOptions.value = params.api
      count();
      //  console.log("触发");
    }

    /**********底部合计******* */
    function count() {
      var pvCount = 0;
      var ipCount = 0;
      for (var i = 0; i < tableCon.ckxq.length; i++) {
        pvCount = pvCount + tableCon.ckxq[i].canUseHouseNum;
        ipCount = ipCount + tableCon.ckxq[i].canUseWeight;
      }


      var topRowss = [
        {headerName: '合计', canUseHouseNum: pvCount, canUseWeight: ipCount}
      ];
      gridOptions.value.setPinnedBottomRowData(topRowss);
    }

    /***************************************** */
        // const summary = ({ columns, data }) => {
        //   let countData = {
        //     canUseHouseNum: 0,
        //     canUseWeight: 0,
        //   };
        //   data.forEach(record => {
        //     countData.canUseHouseNum += record.canUseHouseNum;
        //     countData.canUseWeight += record.canUseWeight;
        //   })


        //   return [{
        //     // name: '统计',
        //     canUseHouseNum: countData.canUseHouseNum,
        //     canUseWeight: countData.canUseWeight,
        //   },]
        // }
    const getColorStyle = (column, record) => {
          if (['data1', 'data2'].includes(column.dataIndex)) {
            return {color: record[column.dataIndex] > 0 ? 'red' : 'green'}
          }
          return undefined
        }
    //页改变
    const pagingChange = (current: number) => {
      // console.log(current, "分页改变");
      pages.value = current;
      doRefresh();
    }
    //页条改变
    const pagingSizeChange = (pageSize: number) => {
      // console.log(pageSize, "条数")
      pages.value = 1;
      paging.size = pageSize;
      doRefresh();
    }
    const alone = (rowKeys, rowKey, record) => {
      // console.log(rowKeys);
      // console.log(rowKey);
      // console.log(record);
    }
    const alonell = (selected, selectedRows,) => {
      // console.log(selected);
      // console.log(selectedRows);
    }
    const scroll = {
      //x: 2000,
      y: 185
    };
    const tablediv = ref(null)
    const pageData = reactive<{
      clothList: ClothSet[]
      showAdd: boolean
      showAdds: boolean
      sideTitle: string
      dropDownData: string
      pageLoading: boolean,
      theight: number,
      tablediv: any,
      rHeight: number | undefined,
      startDate?: string | undefined,
      endDate?: string | undefined,
      flowCardCode?: string | undefined,
      colorCode?: string | undefined,
      greyCode?: string | undefined,
      workshop?: string | undefined,
      customName?: string | undefined,
      merchandiser?: string | undefined,
      auditState?: string | undefined,
    }>({
      clothList: [],
      showAdd: false,
      showAdds: false,
      sideTitle: "新增资料",
      dropDownData: "",
      pageLoading: false,
      theight: 0,
      tablediv: null,
      rHeight: 0,
      startDate: "",
      endDate: "",
      flowCardCode: "",
      colorCode: "",
      greyCode: "",
      workshop: "",
      customName: "",
      merchandiser: "",
      auditState: "",
    });
    const dropDown = reactive({
      department: [],
      khgd: [],
      ddzt: [],
      lzkgl: [],
      didanhao: [],
      buhaoxl: []
    })
    /*********************客户名称******************************** */
        //下拉框得到焦点
    const focusSel = () => {
          selCxAll({customName: ""})
        }
    //下拉数据  
    const options = ref<any>(pageData.clothList);
    const loading = ref(false);
    const handleSearch = (value: any) => {
      if (value) {
        const ob = {customName: value}
        loading.value = true;
        selCxAll(ob);
        options.value = pageData.clothList;
        loading.value = false;
      } else {
        options.value = []
      }
    };

    //下拉框查询
    function selCxAll(val: any) {
      post({
        url: "/aps/custom/getDropValue",
        data: val
      }).then(({data, code}: any) => {
        if (code === 200) {
          pageData.clothList = data;
        } else {
          Message.error({
            content: "查询失败！",
            duration: 5000,
          });
        }
      });
    }

    /***********************客户名称结束************************************ */

    /*********************车间名称******************************** */
        //下拉框得到焦点
    const focusSels = () => {
          selCxAlls({workshop: ""})
        }
    //下拉数据  
    const optionss = ref<any>(dropDown.department);
    const loadings = ref(false);
    const handleSearchs = (value: any) => {
      if (value) {
        const ob = {workshop: value}
        loadings.value = true;
        selCxAlls(ob);
        optionss.value = dropDown.department;
        loadings.value = false;
      } else {
        optionss.value = []
      }
    };

    //下拉框查询
    function selCxAlls(val: any) {
      post({
        url: "/aps/circulatCard/getDropValue",
        data: val
      }).then(({data, code}: any) => {
        if (code === 200) {
          dropDown.department = data;
        } else {
          Message.error({
            content: "查询失败！",
            duration: 5000,
          });
        }
      });
    }

    /***********************车间下拉结束************************************ */

    /*********************客户跟单******************************** */
        //下拉框得到焦点
    const focusSelqw = () => {
          selCxAllqw({merchandiser: ""})
        }
    //下拉数据  
    const optionsqw = ref<any>(dropDown.khgd);
    const loadingqw = ref(false);
    const handleSearchqw = (value: any) => {
      if (value) {
        const ob = {merchandiser: value}
        loadingqw.value = true;
        selCxAllqw(ob);
        optionsqw.value = dropDown.khgd;
        loadingqw.value = false;
      } else {
        optionsqw.value = []
      }
    };

    //下拉框查询  
    function selCxAllqw(val: any) {
      post({
        url: "/aps/circulatCard/getDropValue",
        data: val
      }).then(({data, code}: any) => {
        if (code === 200) {
          dropDown.khgd = data;
        } else {
          Message.error({
            content: "查询失败！",
            duration: 5000,
          });
        }
      });
    }

    /***********************客户跟单下拉结束************************************ */

    /*********************订单状态**********************************/
        //下拉框得到焦点
    const focusSelqws = () => {
          selCxAllqws({auditState: ""})
        }
    //下拉数据  
    const optionsqws = ref<any>(dropDown.ddzt);
    const loadingqws = ref(false);
    const handleSearchqws = (value: any) => {
      if (value) {
        const ob = {auditState: value}
        loadingqws.value = true;
        selCxAllqws(ob);
        optionsqws.value = dropDown.ddzt;
        loadingqws.value = false;
      } else {
        optionsqws.value = []
      }
    };

    //下拉框查询  
    function selCxAllqws(val: any) {
      post({
        url: "/aps/circulatCard/getDropValue",
        data: val
      }).then(({data, code}: any) => {
        if (code === 200) {
          dropDown.ddzt = data.map((item) => {
            item.auditState == 0 ? item.auditState = "未审核" : item.auditState = "已审核"
            return item
          })
        } else {
          Message.error({
            content: "查询失败！",
            duration: 5000,
          });
        }
      });
    }

    /***********************订单状态下拉结束************************************ */

    /*********************流转卡归类状态**********************************/
        //下拉框得到焦点
    const focusSelzx = () => {
          selCxAllzx({exchangeCalorieClassify: ""})
        }
    //下拉数据  
    const optionszx = ref<any>(dropDown.lzkgl);
    const loadingzx = ref(false);
    const handleSearchzx = (value: any) => {
      if (value) {
        const ob = {exchangeCalorieClassify: value}
        loadingzx.value = true;
        selCxAllzx(ob);
        optionszx.value = dropDown.lzkgl;
        loadingzx.value = false;
      } else {
        optionszx.value = []
      }
    };

    //下拉框查询  
    function selCxAllzx(val: any) {
      post({
        url: "/aps/ExchangecalorieClassify/getDropValue",
        data: val
      }).then(({data, code}: any) => {
        if (code === 200) {
          dropDown.lzkgl = data;
        } else {
          Message.error({
            content: "查询失败！",
            duration: 5000,
          });
        }
      });
    }

    /***********************流转卡归类下拉结束************************************ */
    /*********************订单号**********************************/
        //下拉框得到焦点
    const focusSedan = () => {
          selCxAlldan({orderCode: ""})
        }
    //下拉数据  
    const optionsdan = ref<any>(dropDown.didanhao);
    const loadingdan = ref(false);
    const handleSeardan = (value: any) => {
      if (value) {
        const ob = {orderCode: value}
        loadingdan.value = true;
        selCxAlldan(ob);
        optionsdan.value = dropDown.didanhao;
        loadingdan.value = false;
      } else {
        optionsdan.value = []
      }
    };

    //下拉框查询  
    function selCxAlldan(val: any) {
      post({
        url: "/aps/planOrder/getDropValue",
        data: val
      }).then(({data, code}: any) => {
        if (code === 200) {
          //  console.log(data, 4561312);
          dropDown.didanhao = data;
        } else {
          Message.error({
            content: "查询失败！",
            duration: 5000,
          });
        }
      });
    }

    /***********************订单号结束************************************ */
    /*********************布号**********************************/
        //下拉框得到焦点
    const focusSebuhao = () => {
          if (dataForm.planOrderCode === "") {
            Message.warning({
              content: "请先选择订单号",
              duration: 5000,
            });
            dropDown.buhaoxl = [];
          } else {
            selCxAllbuhao();
          }
        }
    //下拉数据   
    // const optionsbuhao = ref<any>(dropDown.buhaoxl);
    // const loadingbuhao = ref(false);
    // const handleSearbuhao = (value: any) => {
    //   if (value) {
    //     const ob = { greyCode: value }
    //     loadingbuhao.value = true;
    //     selCxAllbuhao(ob);
    //     optionsbuhao.value = dropDown.buhaoxl;
    //     loadingbuhao.value = false;
    //   } else {
    //     optionsbuhao.value = []
    //   }
    // };

    //下拉框查询  
    function selCxAllbuhao() {
      post({
        url: "aps/planOrder/getAllInfoByCode",
        data: {
          orderCode: dataForm.planOrderCode
        }
      }).then(({data, code, message}: any) => {
        if (code === 200) {
          // console.log(data, 4561312);
          dropDown.buhaoxl = data.planOrderDetailList;
        } else {
          Message.error({
            content: `${message}`,
            duration: 5000,
          });
        }
      });
    }

    /***********************布号结束************************************ */
        //流转卡归类改变触发
    const lzkglChange = (value) => {
          //  console.log(value, 77777777777777)
          post({
            url: "/aps/circulatCard/getAutomaticInfo",
            data: {code: value}
          }).then(({data, code}: any) => {
            if (code === 200) {
              dataForm.flowCardCode = data.maxFlowCardCode;
            } else {
              Message.error({
                content: "查询失败！",
                duration: 5000,
              });
            }
          });
        }
    //订单号改变
    const ddhgbqkbh = () => {
      // console.log(33333333333333333333);
      dataForm.greyCode = "";
      dropDown.buhaoxl = [];
    }
    onMounted(() => {
      doRefresh();
      doRefreshmx();
    });
    //回车查询
    const hccx = () => {
      pages.value = 1;
      doRefresh();
    }
    //查询
    const selectHandler = () => {
      pages.value = 1;
    }
    const queryData = reactive({
      clothType: "",
    });
    const addHandler = () => {
      for (var key in dataForm) {
        if (key === "id") {
          dataForm[key] = null;
        } else if (key == 'flowCardWeight' || key == 'houseNum' || key == 'orderStripNum' || key == 'orderWeight' || key == 'tubeType') {
          dataForm[key] = 0;
        } else {
          dataForm[key] = "";
        }

      }
      pageData.showAdd = true;
      hqdqrq();
      pageData.sideTitle = "新增流转卡号";
    };
    const dataForm = reactive<ClothSet>({
      id: null,
      createOrderDate: "",
      flowCardCode: "",
      planOrderCode: "",
      greyCode: "",
      productName: "",
      colorCode: "",
      colorName: "",
      colorDepth: "",
      flowCardWeight: undefined,
      houseNum: undefined,
      salesman: "",
      customName: "",
      orderStripNum: undefined,
      orderWeight: undefined,
      merchandiser: "",
      orderDate: "",
      wetRubbing: "",
      testCriteria: "",
      productionDate: "",
      orderType: "",
      dyeingType: "",
      customOrderName: "",
      chlorineResistant: "",
      edge: "",
      anxiousOrderType: "",
      workshop: "",
      stainResistance: "",
      bumpWhite: "",
      sensitiveColor: "",
      cylinderType: "",
      resistanceYellow: "",
      dialPrinting: "",
      contrastColor: "",
      specialSensitiveColor: "",
      productionProcess: "",
      rcInfo: "",
      tubeType: undefined,
      dyeOrderCode: "",
      exchangeCalorieClassify: "",
      lastDeliveryDate: "",
      hqDeliveryDate: "",
    });
    const bzyqobj = reactive<ClothSet>({
      requiredItems: "",
      nowRequirement: "",
      defaultRequirement: "",
      unit: "",
      greyCode: "",
      greyType: "",
      remark: ""
    });
    //布总要求列表添加
    const bzyqAdd = () => {
      tableCon.bzyq.push(JSON.parse(JSON.stringify(bzyqobj)));
      setTimeout(function () {
        gridOptiony.value.setRowData(tableCon.bzyq);
      }, 0)
    }
    //布总要求列表删除
    const deleteBzyq = (val) => {
      //  console.log(val)
      Modal.confirm({
        title: "系统提示",
        content: "确认删除选中的数据?",
        onOk() {
          tableCon.bzyq.splice(val, 1);
          setTimeout(function () {
            gridOptiony.value.setRowData(tableCon.bzyq);
          }, 0);
          //  console.log(tableCon.bzyq, "shngeyu")
        },
      });
    };
    const formRef = ref<FormInstance>();
    const sideOk = () => {
      dataForm.clothRequire = tableCon.bzyq;
      dataForm.matchBatchgrey = tableCon.ggpp
      // console.log(JSON.stringify(dataForm), "dataForm");
      formRef.value?.validate().then((err) => {
        if (!err) {
          if (pageData.sideTitle === "新增流转卡号") {
            post({
              url: "/aps/circulatCard/insert",
              data: dataForm,
            }).then((res: any) => {
              if (res.code === 200) {
                formRef.value?.resetFields();

                pageData.showAdd = false;

                Message.success({
                  content: "新增成功",
                  duration: 5000,
                });
                doRefresh();
              } else {
                Message.error({
                  content: res.message,
                  duration: 5000,
                });
              }

            });
          } else {
            post({
              url: "/aps/circulatCard/update",
              data: dataForm,
            }).then((res: any) => {
              if (res.code === 200) {
                formRef.value?.resetFields();
                pageData.showAdd = false;

                Message.success({
                  content: "修改成功",
                  duration: 5000,
                });
                doRefresh();
              } else {
                Message.error({
                  content: res.message,
                  duration: 5000,
                });
              }

            });
          }
        }
      });
    };
    const lzkgb = () => {
      tableCon.ggpp = [];
      tableCon.bzyq = [];
      pageData.showAdd = false;

    }
    //缸管配胚多选选中的id
    const selectedRowKeysas = ref([]);
    //详情多选选中的id
    const selectedRowKeysqw = ref([]);
    //详情取消
    const djqxiao = () => {
      pageData.showAdds = false
      pageData.dropDownData = "";
    }
    //详情保存
    const sideOkqw = () => {
      var arr = [];
      arr = gridOptions.value.getSelectedRows().map(its => {
        return its.wmsDetailId
      })
      if (arr.length == 0) {
        Message.warning({
          content: "请选择要保存的数据",
          duration: 5000,
        });
        return;
      }
      // console.log(arr, 369963);
      var result = tableCon.ckxq.filter(item => {
        return arr.indexOf(item["wmsDetailId"]) !== -1;
      });
      //  console.log(result, 89999999999999999);
      if (tableCon.ggpp.length > 0) {
        // console.log(tableCon.ggpp,5555555555555);
        // let newArr = result.filter((item) => {
        //  return tableCon.ggpp.forEach((ele) => {
        //     console.log(ele.id)
        //     console.log(item.id)
        //     if(ele.id === item.id){
        //       return  false
        //     }else{
        //       return true
        //     }
        //   }) 
        // });
        var newArr = [];
        newArr = tableCon.ggpp.map(iis => {
          return iis.wmsDetailId
        })
        //  console.log(newArr, "sdsadasdasdada");
        var resultss = result.filter(itemss => {
          return newArr.indexOf(itemss["wmsDetailId"]) == -1;
        });
        tableCon.ggpp = [...tableCon.ggpp, ...resultss];
      } else {
        tableCon.ggpp = [...result];
      }
      counts();
      pageData.showAdds = false
      pageData.dropDownData = "";
      //selectedRowKeysqw.value = [];
      // console.log(result,"666655555444444");
    }
    //流转卡列表删除
    const deleteHandlersss = () => {
      var arr = [];
      arr = gridOption.value.getSelectedRows().map((item) => {
        return item.id
      })
      // console.log(gridOption.value.getSelectedRows(), "lkj");
      if (arr.length === 0) {
        Message.warning({
          content: "请选择要删除的数据",
          duration: 5000,
        });
        return;
      }
      Modal.confirm({
        title: "系统提示",
        content: "确认删除选中的数据?",
        onOk() {
          post({
            url: "/aps/circulatCard/delete",
            data: arr,
          }).then(({code, data, message}: any) => {
            if (code === 200) {
              Message.success({
                content: "删除成功",
                duration: 5000,
              });
              pages.value = 1;
              doRefresh();
            } else {
              Message.error({
                content: `${message}`,
                duration: 5000,
              });
            }
            //  selectedRowKeys.value = [];
          });
        },
      });

    }
    //缸管配胚删除
    const deleteHandler = (record) => {
      var arr = [];
      arr = gridOptionp.value.getSelectedRows().map((item) => {
        return item.wmsDetailId
      })
      // console.log(arr, 456);
      if (arr.length === 0) {
        Message.error('请先勾选')
        return;
      }
      Modal.confirm({
        title: "系统提示",
        content: "确认要删除数据?",
        onOk() {
          var xdarr = tableCon.ggpp.filter((item, index) => {
            //  console.log(item, "item");
            return arr.indexOf(item["wmsDetailId"]) == -1
          });
          // console.log(xdarr, 693);
          tableCon.ggpp = xdarr;
          counts();
          // selectedRowKeysas.value = [];
        },
      });
    };
    //审核数据
    const toExamine = () => {
      // console.log(gridOption.value.getSelectedRows(),9999);
      if (gridOption.value.getSelectedRows().length === 0) {
        Message.error('请先勾选')
        return;
      }
      //  console.log(selectedRowKeys.value,"审核");
      var arr = [];
      gridOption.value.getSelectedRows().forEach(item => {
        var obj = {};
        obj.id = item.id;
        obj.auditState = 1
        arr.push(obj)
      })
      Modal.confirm({
        title: "系统提示",
        content: "确认要审核数据?",
        onOk() {
          post({
            url: "/aps/circulatCard/audit",
            data: arr,
          }).then(({code, data}: any) => {
            if (code === 200) {
              Message.success({
                content: "审核成功",
                duration: 5000,
              });
              pagination.page = 1
              doRefresh();
            } else {
              Message.error({
                content: "审核失败",
                duration: 5000,
              });
            }

          });
        },
      });
    };
    //反审
    const counterExamination = () => {
      if (gridOption.value.getSelectedRows().length === 0) {
        Message.error('请先勾选')
        return;
      }
      var arr = [];
      gridOption.value.getSelectedRows().forEach(item => {
        var obj = {};
        obj.id = item.id;
        obj.auditState = 0
        arr.push(obj)
      })
      Modal.confirm({
        title: "系统提示",
        content: "确认要反审数据?",
        onOk() {
          post({
            url: "/aps/circulatCard/audit",
            data: arr,
          }).then(({code, data}: any) => {
            if (code === 200) {
              Message.success({
                content: "反审成功",
                duration: 5000,
              });
              pagination.page = 1
              doRefresh();

            } else {
              Message.error({
                content: "反审失败",
                duration: 5000,
              });
            }

          });
        },
      });
    };
    const editHandler = (record: ClothSet) => {
      //  console.log(record, "修改数据需要看看");
      for (var key in record) {
        dataForm[key] = record[key]
      }
      //布要接口
      // post({
      //   url: "/aps/clothRequire/getList",
      //   data: { circulatCardId: record.id },
      // }).then((res: any) => {
      //   if (res.code === 200) {
      //     // console.log(res,"结果");
      //     tableCon.bzyq = res.data;
      //   } else {
      //     Message.error({
      //       content: res.message,
      //       duration: 5000,
      //     });
      //   }

      // });
      post({
        url: "aps/planOrder/getAllInfoByCode",
        data: {
          orderCode: record.planOrderCode
        }
      }).then(({data, code}: any) => {
        //   console.log(data, 45613123333333);
        if (code === 200) {
          // console.log(data, 45613123333333);
          tableCon.bzyq = data.clothRequireList;
        } else {
          Message.error({
            content: "查询失败！",
            duration: 5000,
          });
        }
      });
      //缸管配胚接口
      post({
        url: "/aps/matchBatchgrey/getList",
        data: {circulatCardId: record.id},
      }).then((res: any) => {
        if (res.code === 200) {
          console.log(res, "结果");
          tableCon.ggpp = res.data;
        } else {
          Message.error({
            content: res.message,
            duration: 5000,
          });
        }

      });
      pageData.sideTitle = '修改流转卡号'
      pageData.showAdd = true
    };
    //日期改变
    const riqiChange = (value) => {
      //  console.log(value, "日期改变");
      pageData.startDate = value[0]
      pageData.endDate = value[1]
    }
    const grayClothDetails = () => {
      pageData.showAdds = true;
    }
    //回车查询
    const huiche = () => {
      doRefreshmx();
    }
    const selectmx = () => {
      doRefreshmx();
    }

    //导出
    const exports = () => {
      if (selectedRowKeys.value.length === 0) {
        Message.error('请先勾选')
        return
      } else {
        //将表头拼接出来
        let head = "<th>编号</th><th>名称</th><th>备注</th><th>创建人</th><th>创建时间</th><th>最后修改人</th><th>最后修改时间</th>"
        //拿到当前表格数据与勾选的行做筛选

        let nowRow = table.dataList.filter(function (o) {
          return selectedRowKeys.value.indexOf(o["id"]) !== -1;
        })
        let body = "";
        nowRow.forEach(function (o) {
          body += "<tr><td>" + o["merceryCode"] + "</td>";
          body += "<td>" + o["merceryName"] + "</td>";
          body += "<td>" + o["remark"] + "</td>";
          body += "<td>" + o["createName"] + "</td>";
          body += "<td>" + o["createTime"] + "</td>";
          body += "<td>" + o["updateName"] + "</td>";
          body += "<td>" + o["updateTime"] + "</td>";
          body += "</tr>";
        })
        tableToXlsx(head, '布类资料', body)
        //  console.log(table)
      }
    }

    function tableToXlsx(head: any, filename: any, body: any) {
      const uri = 'data:application/vnd.ms-excel;base64,',
          template = `<html>
        <head><meta charset="UTF-8"></head>
        <body><table border="1"><tr>${head}</tr>${body}</table></body>
    </html>`;

      const a = document.createElement('a');
      a.href = uri + window.btoa(unescape(encodeURIComponent(template)));
      a.download = filename;
      a.click();
      document.removeChild(a);
    }

    //模板下载
    const downloadHandler = () => {
      axios.get(baseURL + '/product/mercery/uploadMerceryModel', {
        responseType: 'blob',
        headers: {
          token: sessionStorage.getItem('USER-TOKEN-KEY')
        }
      }).then((res) => {
        if (res.status === 200) {
          filedownload(res.data, '布类资料.xlsx')
        }
      })
    }
    //导入
    const importHandler = () => {

      const inputEle: HTMLInputElement = document.createElement('input')
      inputEle.type = 'file'
      inputEle.id = 'fileUploadExcel'
      inputEle.accept = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel'
      inputEle.addEventListener('change', (e) => {
        const formData = new FormData()
        if (inputEle.files !== null) {
          formData.append('file', inputEle.files[0] || '')
        } else {
          Message.warning('未选择文件！');
          return
        }
        pageData.pageLoading = true
        axios.post(baseURL + '/product/mercery/analyseMerceryModel', formData, {
          headers: {
            "Content-Type": 'multipart/form-data',
            "token": sessionStorage.getItem('USER-TOKEN-KEY')
          },
        }).then((result) => {
          if (result.data['code'] === 200) {
            Message.success('导入成功')
          } else {
            Message.error(result.data.message)
          }

        }).finally(() => {
          pageData.pageLoading = false
          doRefresh()
        })
      })
      inputEle.click()
    }
    return {
      alone,
      alonell,
      scroll,
      scrollbar,
      tablediv,
      downloadHandler,
      importHandler,
      selectmx,
      hasChiese,
      deleteHandler,
      deleteHandlersss,
      counterExamination,
      toExamine,
      sideOk,
      lzkgb,
      formRef,
      dataForm,
      addHandler,
      selectedRowKeys,
      pagination,
      // tableColumns,
      table,
      columns,
      tableCon,
      rowKey,
      pageData,
      queryData,
      editHandler,
      selectHandler,
      options,
      loading,
      handleSearch,
      exports,
      focusSel,
      headerShow,
      InformationEnglishbt,
      brandInformationbt,
      shippingInformationbt,
      getColorStyle,
      grayClothDetails,
      riqiChange,
      pages,
      paging,
      pagingChange,
      pagingSizeChange,
      dropDown,
      focusSels,
      handleSearchs,
      focusSelqw,
      handleSearchqw,
      focusSelqws,
      handleSearchqws,
      bzyqAdd,
      bzyqobj,
      deleteBzyq,
      selectedRowKeysas,
      selectedRowKeysqw,
      sideOkqw,
      djqxiao,
      focusSelzx,
      handleSearchzx,
      lzkglChange,
      rowKeyqw,
      fwrqs,
      hccx,
      /**************** */
      rowData,
      defaultColDef,
      columnDefs,
      tc,
      gridReady,
      gridOption,
      /************************ */
      /********布种*******/
      defaultColDefy,
      tcy,
      gridOptiony,
      gridReadye,
      /************** */
      /*********缸管配坯******** */
      defaultColDefp,
      // tcp,
      gridOptionp,
      gridReadyp,
      /***************** */
      /**********送货************* */
      defaultColDefs,
      //tcs,
      gridOptions,
      gridReadys,
      huiche,
      /************************ */
      Search,
      CirclePlus,
      Delete,
      EditPen,
      Tickets,
      Edit,
      /*********************** */
      focusSedan,
      optionsdan,
      loadingdan,
      handleSeardan,
      /********************* */
      focusSebuhao,
      ddhgbqkbh
    };
  },
  components: {Toolbar, },
};
</script>
<style lang="less">
.pagings {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.pagings {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

.arco-input-wrapper {
  background-color: #fff;
  border: 1px solid #cccccc;
}

.arco-form-item-status-error .arco-input-wrapper:not(.arco-input-disabled),
.arco-form-item-status-error .arco-textarea-wrapper:not(.arco-textarea-disabled) {
  border: 1px solid #f53f3f;
}

.arco-select-view-single {
  background-color: #fff !important;
  border: 1px solid #cccccc;
}

.arco-select-view-single:hover {
  border: 1px solid #cccccc !important;
}

.arco-form-item-status-error .arco-select-view:not(.arco-select-view-disabled) {
  border: 1px solid #f53f3f;
}

.arco-picker {
  background-color: #fff !important;
  border: 1px solid #cccccc;
}

.arco-picker:hover {
  border: 1px solid #cccccc !important;
}

.arco-picker-error {
  border: 1px solid #f53f3f;
}

.tjan {
  padding: 0 0px 6px 10px;
  display: flex;
  justify-content: flex-end;
}

.shruq-but {
  width: 90px;
  height: 30px;
  color: #165dff;
  background-color: #e8f7ff;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 6px;
  cursor: pointer;
}

.shruq-buts {
  width: 90px;
  height: 30px;
  color: #ffffff;
  background-color: #f53f3f;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 6px;
  cursor: pointer;
}

/********************************************** */
.stbutencx {
  background-color: #409eff;

  &:hover {
    background-color: #79bbff;
  }
}

.ag-header-cell-resize::after {
  top: 0 !important;
  height: 100% !important;
}

.ag-cell {
  border-right: 1px solid #D9DDDF !important;
}

.stbutenxz {
  background-color: #67c23a;

  &:hover {
    background-color: #b3e19d;
  }
}

/************************************************** */
</style>